<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>U拍客</title>
    <link rel="stylesheet" href="css/Upaike.css"/>
    <link rel="stylesheet" href="css/Order.css"/>
    <link rel="stylesheet" href="css/Info.css"/>
    <link rel="stylesheet" href="css/GoodsManage.css"/>
    <link rel="stylesheet" href="css/RegisterLoginModel.css"/>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/Upaike.js"></script>
</head>
<body>

    <div class="Shape_2">
        <div class="header">
            <img class="logo" src="src/logo.png" alt="">
            <div class="menuBar1">
                <div>首页</div>
                <div>产品</div>
                <div>配件</div>
                <div>模版库</div>
                <div>插件库</div>
                <div>下载中心</div>
                <div>帮助中心</div>
            </div>
            <div class="login">
                <div>
                    <img src="src/login.png" alt="">
                </div>
                <div id="login_btn" class="hover">登陆</div>
                <div>·</div>
                <!--<div>•</div>-->
                <div id="register_btn" class="hover">注册</div>

            </div>
        </div>
    </div>

    <div class="friends_list_test">
        <div class="friends_list">
            <img class="logo2" src="src/logo2.png" alt="">
            <div class="title">
                <div class="chinese">
                    客户中心
                </div>
                <div class="english">
                    Client Center
                </div>
            </div>
        </div>
    </div>

    <div class="menuPanel">
        <div class="menuBar2">
            <div class="hover active">我的帐户</div>
            <div>|</div>
            <div class="hover">产品管理</div>
            <div>|</div>
            <div class="hover">U客社区</div>
        </div>
    </div>
    <!--主页内容主体-->
    <div class="ContentMain">

        <!--主页菜单1-->
        <div class="cMenuBar cMenuBarInfo hide">
            <div class="hover">照片管理</div>
            <div class="hover">我的模板</div>
            <div class="hover">我的插件</div>
            <div class="hover">我的授权码</div>
            <img class="ItemSign" src="src/arrow.png" alt="">
        </div>
        <!--主页菜单2-->
        <div class="cMenuBar cMenuBarManage">
            <div class="hover active">基本资料</div>
            <div class="hover">我的订单</div>
            <img class="ItemSign" src="src/arrow.png" alt="">
        </div>
        <!--主页内容-->
        <div class="Content">
            <!--订单详情-->
            <div class="content_panel OrderDetail hide">
                <div class="OrderTitle">我的订单</div>
                <div class="OrderContent">
                    <div class="Order_Header">
                        <div class="row">
                            <div class="No">订单编号：20142135665</div>
                            <div class="Status">状态：<span>已完成</span></div>
                            <div class="back"><span><img style="vertical-align: middle" src="src/undo.png" alt=""></span>返回上级</div>
                        </div>
                    </div>
                    <div class="Order_Content">
                        <div class="InfoPart">
                            <div class="O_Title">收件人信息</div>
                            <div>收件人：某某人</div>
                            <div>手机：1356668990</div>
                            <div>地址：四川省成都市高新区天府软件园D6-1104</div>
                            <div>邮编：610041</div>
                        </div>
                        <div class="InfoPart">
                            <div class="O_Title">支付及配送方式</div>
                            <div>支付方式：货到付款</div>
                            <div>运    费：15.00元</div>
                            <div>送货日期：2014-03-11</div>
                            <div>配送时间：9:00-15:00</div>
                        </div>
                        <div class="InfoPart">
                            <div class="O_Title">发票信息</div>
                            <div>发票类型：普通发票</div>
                            <div>发票抬头：成都有尔科技有限公司</div>
                            <div>发票内容：电脑配件</div>
                        </div>
                        <div class="InfoPart">
                            <div class="O_Title">商品清单</div>
                            <table class="item_list">
                                <tr class="table_head">
                                    <td>商品编号</td>
                                    <td>商品图片</td>
                                    <td>商品名称</td>
                                    <td>单价</td>
                                    <td>商品数量</td>
                                    <td>小计</td>
                                </tr>
                                <tr class="list">
                                    <td>S106928</td>
                                    <td><img src="src/Shape%2036.png" alt=""/></td>
                                    <td>U-Paiker 基础版本</td>
                                    <td>18888元</td>
                                    <td>1</td>
                                    <td>18888.00</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="Order_Footer">
                        <table>
                            <tr class="">
                                <td>订单金额</td>
                                <td>18888.00</td>
                            </tr>
                            <tr class="">
                                <td>运费</td>
                                <td>15.00</td>
                            </tr>
                            <tr class="price">
                                <td>商品总价</td>
                                <td class="unfinished">18903.00元</td>
                            </tr>
                        </table>
                    </div>
                    <div style="height: 10px">
                        <img src="src/waveLine.png" style="width: 100%" alt=""/>
                    </div>
                    <div class="circle c1"></div>
                    <div class="circle c2"></div>
                </div>
            </div>
            <!--订单列表-->
            <div class="content_panel OrderListPanel hide">
                <div class="OrderTitle">我的订单</div>
                <div class="OrderList">
                    <div class="ListHeader">交易订单</div>
                    <div class="msg">你目前还没有交易订单</div>
                    <table class="order_list">
                        <tr class="order_list_header">
                            <td>订单编号</td>
                            <td>收货人</td>
                            <td>订单金额</td>
                            <td>提交时间</td>
                            <td>订单状态</td>
                            <td>操作</td>
                        </tr>
                        <tr>
                            <td>20141144566</td>
                            <td>某某人</td>
                            <td>￥18888</td>
                            <td>
                                <div>2014-03-10</div>
                                <div>11:45:20</div>
                            </td>
                            <td class="unfinished">未付款</td>
                            <td class="detail">查看详情</td>
                        </tr>
                        <tr>
                            <td>20141144566</td>
                            <td>某某人</td>
                            <td>￥18888</td>
                            <td>
                                <div>2014-03-10</div>
                                <div>11:45:20</div>
                            </td>
                            <td class="unfinished">备货中</td>
                            <td class="detail">查看详情</td>
                        </tr>
                        <tr>
                            <td>20141144566</td>
                            <td>某某人</td>
                            <td>￥18888</td>
                            <td>
                                <div>2014-03-10</div>
                                <div>11:45:20</div>
                            </td>
                            <td class="finish">已完成</td>
                            <td class="detail">查看详情</td>
                        </tr>
                    </table>
                    <hr style="border-bottom: 2px solid #666666;margin: 0"/>
                    <div class="foot_msg">由于数据同步可能带来订单信息及订单状态显示滞后，请稍等一会儿。</div>

                </div>
                <div class="OrderList">
                    <div class="ListHeader">已关闭订单</div>
                    <div class="msg">你目前还没有已关闭订单</div>
                    <table class="order_list">

                    </table>
                    <hr style="border-bottom: 2px solid #666666;margin: 0"/>
                    <div class="foot_msg">由于数据同步可能带来订单信息及订单状态显示滞后，请稍等一会儿。</div>

                </div>
            </div>
            <!--基本资料-->
            <div class="content_panel Info ">
                <div class="OrderTitle">
                    <span>基本资料</span>
                    <span class="title_msg">（请完善您的基本资料，否则您将无法使用登录之外的功能）</span>
                    <span class="info_check">资料未验证</span>
                </div>
                <div class="OrderList">
                    <div class="ListHeader">
                        <span>注册信息</span>
                        <span class="edit"><img src="src/edit.png" alt="">编辑</span>
                    </div>
                    <table>
                        <tr>
                            <td>登录邮箱</td>
                            <td>info@crossyour.com</td>
                        </tr>
                        <tr>
                            <td>登录密码</td>
                            <td>********</td>
                        </tr>
                        <tr>
                            <td>所属行业</td>
                            <td>文化创意</td>
                        </tr>
                        <tr>
                            <td>公司名称</td>
                            <td>有尔文化传播有限公司</td>
                        </tr>
                        <tr>
                            <td>公司网址</td>
                            <td>www.crossyour.com</td>
                        </tr>
                        <tr>
                            <td>公司所在地</td>
                            <td>四川省成都市高新区</td>
                        </tr>
                        <tr>
                            <td>联系电话</td>
                            <td>028-86543214</td>
                        </tr>
                    </table>
                </div>
                <div class="OrderList">
                    <div class="ListHeader">
                        <span>注册信息</span>
                        <span class="edit"><img src="src/edit.png" alt="">编辑</span>
                    </div>
                    <table>
                        <tr>
                            <td>收件人</td>
                            <td>某某人</td>
                        </tr>
                        <tr>
                            <td>手机</td>
                            <td>13566666669</td>
                        </tr>
                        <tr>
                            <td>地址</td>
                            <td>四川省成都市高新区天府软件园D6-1104</td>
                        </tr>
                        <tr>
                            <td>邮编</td>
                            <td>610041</td>
                        </tr>
                        <tr>
                            <td>发票抬头</td>
                            <td>有尔文化传播有限公司</td>
                        </tr>
                        <tr>
                            <td>备注</td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                        </tr>
                    </table>
                </div>
            </div>
            <!--我的模板-->
            <div class="content_panel MyModel hide">
                <div class="OrderTitle">我的模板</div>
                <hr/>
                <div class="model_title">已购买模板数：<span class="model_number">3</span></div>
                <hr/>
                <div class="model_items">
                    <div class="model_item">
                        <img src="src/test_img1.jpg" alt="">
                        <div class="item_title">模板标题</div>
                        <div class="item_ps"><p>简单描述一下这个模板可以煽情一点,用户有下载的冲动。</p></div>
                        <div class="item_ps2">分辨率：1920x1080</div>
                        <div class="item_ps3 red ">限时免费</div>
                    </div>
                    <div class="model_item">
                        <img src="src/test_img1.jpg" alt="">
                        <div class="item_title">模板标题</div>
                        <div class="item_ps"><p>简单描述一下这个模板可以煽情一点,用户有下载的冲动。</p></div>
                        <div class="item_ps2">分辨率：1920x1080</div>
                        <div class="item_ps3 gray ">免费</div>
                    </div>
                    <div class="model_item">
                        <img src="src/test_img1.jpg" alt="">
                        <div class="item_title">模板标题</div>
                        <div class="item_ps"><p>简单描述一下这个模板可以煽情一点,用户有下载的冲动。</p></div>
                        <div class="item_ps2">分辨率：1920x1080</div>
                        <div class="item_ps3 blue ">已付费</div>
                    </div>
                    <div class="model_item">
                        <img src="src/test_img2.jpg" alt="">
                        <div class="item_title">模板标题</div>
                        <div class="item_ps"><p>简单描述一下这个模板可以煽情一点,用户有下载的冲动。</p></div>
                        <div class="item_ps2">所需支持：手机</div>
                        <div class="item_ps3 gray ">免费</div>
                    </div>
                </div>
            </div>
            <!--照片管理-->
            <div class="content_panel Album hide">
                <div class="OrderTitle">照片管理</div>
                <div class="albums">
                    <div class="album ">
                        <div class="cover"><span>126张</span></div>
                        <div class="album_name">
                            <p>
                                相册名居中 </p><p>
                                可以放两排
                            </p>
                        </div>
                    </div>
                    <div class="album ">
                        <div class="cover"><span></span></div>
                        <div class="album_name">
                            <p>
                                相册名居中 </p><p>
                            可以放两排
                        </p>
                        </div>
                    </div>
                    <div class="album ">
                        <div class="cover"><span></span></div>
                        <div class="album_name">
                            <p>
                                相册名居中 </p><p>
                            可以放两排
                        </p>
                        </div>
                    </div>
                    <div class="album ">
                        <div class="cover"><span></span></div>
                        <div class="album_name">
                            <p>
                                相册名居中 </p><p>
                            可以放两排
                        </p>
                        </div>
                    </div>
                    <div class="album ">
                        <div class="cover"><span></span></div>
                        <div class="album_name">
                            <p>
                                相册名居中 </p><p>
                            可以放两排
                        </p>
                        </div>
                    </div>
                    <div class="album ">
                        <div class="cover"><span></span></div>
                        <div class="album_name">
                            <p>
                                相册名居中 </p><p>
                            可以放两排
                        </p>
                        </div>
                    </div>
                </div>

            </div>
            <!--相册入-->
            <div class="content_panel Photo hide">
                <div class="OrderTitle">照片管理</div>
                <div class="AlbumName">相册名（126张）<div><span><img src="src/trash.png" alt=""/>删除</span>|<span><img src="src/undo-white.png" alt="">返回相册</span></div></div>
                <div class="photos">
                    <div class="photo">
                        <div class="photo_img">
                            <div class="chose">
                                <img src="src/check.png" alt="">
                            </div>
                            <div class="list">
                                <ul>
                                    <li>选中</li>
                                    <li>删除</li>
                                </ul>
                            </div>
                            <div class="photo_id">ID：20131408498799</div>
                        </div>
                    </div>
                    <div class="photo">
                        <div class="photo_img">
                            <div class="chose">
                                <img src="src/check.png" alt="">
                            </div>
                            <div class="list">
                                <ul>
                                    <li>选中</li>
                                    <li>删除</li>
                                </ul>
                            </div>
                            <div class="photo_id">ID：20131408498799</div>
                        </div>
                    </div>
                    <div class="photo">
                        <div class="photo_img">
                            <div class="chose">
                                <img src="src/check.png" alt="">
                            </div>
                            <div class="list">
                                <ul>
                                    <li>选中</li>
                                    <li>删除</li>
                                </ul>
                            </div>
                            <div class="photo_id">ID：20131408498799</div>
                        </div>
                    </div>
                    <div class="photo">
                        <div class="photo_img">
                            <div class="chose">
                                <img src="src/check.png" alt="">
                            </div>
                            <div class="list">
                                <ul>
                                    <li>选中</li>
                                    <li>删除</li>
                                </ul>
                            </div>
                            <div class="photo_id">ID：20131408498799</div>
                        </div>
                    </div>
                    <div class="photo">
                        <div class="photo_img">
                            <div class="chose">
                                <img src="src/check.png" alt="">
                            </div>
                            <div class="list">
                                <ul>
                                    <li>选中</li>
                                    <li>删除</li>
                                </ul>
                            </div>
                            <div class="photo_id">ID：20131408498799</div>
                        </div>
                    </div>
                    <div class="photo">
                        <div class="photo_img">
                            <div class="chose">
                                <img src="src/check.png" alt="">
                            </div>
                            <div class="list">
                                <ul>
                                    <li>选中</li>
                                    <li>删除</li>
                                </ul>
                            </div>
                            <div class="photo_id">ID：20131408498799</div>
                        </div>
                    </div>
                    <div class="photo">
                        <div class="photo_img">
                            <div class="chose">
                                <img src="src/check.png" alt="">
                            </div>
                            <div class="list">
                                <ul>
                                    <li>选中</li>
                                    <li>删除</li>
                                </ul>
                            </div>
                            <div class="photo_id">ID：20131408498799</div>
                        </div>
                    </div>
                    <div class="photo">
                        <div class="photo_img">
                            <div class="chose">
                                <img src="src/check.png" alt="">
                            </div>
                            <div class="list">
                                <ul>
                                    <li>选中</li>
                                    <li>删除</li>
                                </ul>
                            </div>
                            <div class="photo_id">ID：20131408498799</div>
                        </div>
                    </div>
                </div>
            </div>
            <!--授权码-->
            <div class="content_panel Key hide">
                <div class="OrderTitle">照片管理</div>
                <table class="key_table">
                    <tr class="key_title">
                        <td>编号</td>
                        <td>授权码</td>
                        <td>状态</td>
                    </tr>
                    <tr class="key_no">
                        <td>01</td>
                        <td>2014-1315-8956-6811</td>
                        <td>未激活</td>
                    </tr>
                    <tr class="key_yes">
                        <td>02</td>
                        <td>2014-1315-8956-6812</td>
                        <td>已激活</td>
                    </tr>

                </table>

            </div>

        </div>
    </div>


    <div class="login_model hide">
        <div class="login_title">登录</div>

        <div class="login_name">
            <label for="n">账号</label>
            <input id="n" type="text">
        </div>

        <div class="login_pwd">
            <label for="p">密码</label>
            <input id="p" type="password">
        </div>

        <div class="login_btn">
            <input class="" type="button" value="登录">
            <a href="#">忘记密码？</a>
        </div>
    </div>
    <div class="register_model hide">
        <div class="register_title">欢迎注册U客帐户</div>
        <div class="register_panel ">
            <div class="line">
                <label for="email">登录邮箱</label>
                <input id="email" type="text">
                <div class="register_msg register_msg_red">请填写邮箱</div>
            </div>
            <div class="line">
                <label for="pwd">密码</label>
                <input id="pwd" type="password">
                <span class="register_msg_red">密码格式不对</span>
                <div class="register_msg register_msg_normal">密码长度8~16位，数字、字母、字符至少包含两种 </div>
            </div>
            <div class="line">
                <label for="spwd">确认密码</label>
                <input id="spwd" type="password">
                <span class="register_msg_red">密码输入不一致</span>
            </div>
            <div class="register_code">
                <label for="code">验证码</label>
                <input id="code" type="text">
                <span class="register_msg_normal">看不清？</span>
                <a style="font-size: 12px" href="#">换一张</a>
            </div>
            <div class="to_agree">
                <label></label>
                <input type="checkbox" id="cb"/>
                <label for="cb">接受</label>
                <a style="font-size: 12px" href="#">服务协议条款</a>
            </div>
            <div class="register_btn">
                <label></label>
                <input type="button" value="立即注册">
            </div>
        </div>
        <div class="register_false hide">
            <img style="display: block;margin:93px auto 0" src="src/bill.png" alt="">
            <div style="font-size: 18px;color: #666666;text-align: center;margin-top: 31px;font-weight: 500">各种原因导致注册失败，写一段话让他各人回上一步再搞一盘！</div>
            <input class="register_msg_btn" type="button" value="返回上页">
        </div>
        <div class="register_success hide">
            <img style="display: block;margin:93px auto 0" src="src/bill-success.png" alt="">
            <div style="font-size: 18px;color: #666666;text-align: center;margin-top: 31px;font-weight: 500">恭喜您！成功注册为U客，请登录您的邮箱完成邮箱验证！</div>
            <input class="register_msg_btn" type="button" value="返回首页">
        </div>
    </div>
    <div class="delete_remind hide">
        <div class="remind_title">删除提示</div>
        <div class="remind_content">
            <img src="src/alert%202.png" alt="">
            <div class="remind_text">
                <p>即将为您删除您选中的照片，
                    删除后将无法回复！</p>
            </div></div>
        <div class="remind_ok_btn">
            <button>确定</button>
            <button>取消</button>
        </div>
    </div>
    <div class="gray_cover hide">

</div>
</body>
</html>